<template>
  <div class="apply-container">
    <h1>陪护申请</h1>
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="requestId" label="申请编号" width="120" />
      <el-table-column prop="patientName" label="患者姓名" width="120" />
      <el-table-column prop="createTime" label="申请时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始陪护时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.startTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束陪护时间" width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-button 
            v-if="scope.row.status === '1'"
            type="primary" 
            size="small"
            @click="handleAccept(scope.row)"
          >同意申请</el-button>
          <el-button 
            type="info" 
            size="small"
            @click="handleViewPatient(scope.row)"
          >查看患者信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 患者信息弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="患者信息"
      width="500px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="姓名">{{ patientInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ patientInfo.gender === 0 ? '男' : '女' }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ patientInfo.age }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ patientInfo.phone }}</el-descriptions-item>
        <el-descriptions-item label="居住地址">{{ patientInfo.address }}</el-descriptions-item>
        <el-descriptions-item label="病例简介">{{ patientInfo.caseInfo }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { listCarerequest } from '@/api/carerequest'
import { updateCarerequest } from '@/api/carerequest'
import { getUser } from '@/api/user'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const tableData = ref([])
const dialogVisible = ref(false)
const patientInfo = ref({})

const handleViewPatient = async (row) => {
  try {
    const res = await getUser(row.userId)
    patientInfo.value = res
    dialogVisible.value = true
    console.log(patientInfo.value)
  } catch (error) {
    console.error('获取患者信息失败:', error)
    ElMessage.error('获取患者信息失败，请重试')
  }
}

const handleAccept = async (row) => {
  try {
    await updateCarerequest({
      requestId: row.requestId,
      status: '2'
    })
    ElMessage.success('已接受申请')
    // 刷新列表
    getList()
  } catch (error) {
    console.error('接受申请失败:', error)
    ElMessage.error('接受申请失败，请重试')
  }
}

const getStatusText = (status) => {
  const statusMap = {
    '1': '待接受',
    '2': '已接受',
    '3': '已完成',
    '4': '已取消'
  }
  return statusMap[status] || '未知状态'
}

const getStatusType = (status) => {
  const typeMap = {
    '1': 'warning',  // 待接受 - 黄色
    '2': 'primary',  // 已接受 - 蓝色
    '3': 'success',  // 已完成 - 绿色
    '4': 'info'      // 已取消 - 灰色
  }
  return typeMap[status] || 'info'
}

const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return ''
  const date = new Date(dateTimeStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
}

const getList = async () => {
  loading.value = true
  try {
    const res = await listCarerequest()
    tableData.value = res
    console.log(tableData.value)
  } catch (error) {
    console.error('获取陪护申请列表失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.apply-container {
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

:deep(.el-button) {
  margin-left: 8px;
}

:deep(.el-button:first-child) {
  margin-left: 0;
}

:deep(.el-descriptions__label) {
  width: 100px;
  justify-content: flex-end;
}
</style> 